<template>
	<van-popup
		v-model:show="innerShow"
		position="bottom"
		:style="{ height: '60vh', background: '#f5f6f9' }"
		round
	>
		<div class="popup-title">{{ $t('service.title', '选择服务内容') }}</div>
		<van-radio-group v-model="activeId">
			<van-cell-group>
				<template v-for="item in serviceList" :key="item.id">
					<van-cell
						:title="item.name"
						clickable
						@click="activeId = item.id"
					>
						<template #right-icon>
							<van-radio :name="item.id" />
						</template>
					</van-cell>
					<!-- 二级菜单只在当前选中的一级下方显示 -->
					<div v-if="activeId === item.id" class="service-wrap">
						<div
							v-for="detail in item.serviceLists"
							:key="detail.id"
							class="service-item"
							:class="{
								selected: detail.id === selectedServiceId,
							}"
							@click="selectService(detail)"
						>
							{{ detail.name }}
						</div>
					</div>
				</template>
			</van-cell-group>
		</van-radio-group>
		<div class="popup-footer">
			<van-button type="primary" block round @click="confirm">{{
				$t('service.confirm', '确定')
			}}</van-button>
		</div>
	</van-popup>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
import type { ServiceItem, ServiceDetail } from '@/types/service'

const props = defineProps<{
	show: boolean
	serviceList: ServiceItem[]
	modelValue: string // 选中的服务内容名称
}>()
const emit = defineEmits(['update:show', 'update:modelValue'])

// 用本地变量控制弹窗显示
const innerShow = ref(props.show)
watch(
	() => props.show,
	(val) => (innerShow.value = val)
)
watch(innerShow, (val) => emit('update:show', val))

const activeId = ref<number | null>(null)
const selectedServiceId = ref<number | null>(null)

// 默认选中第一个一级菜单
watch(
	() => props.serviceList,
	(list) => {
		if (list && list.length && activeId.value === null) {
			activeId.value = list[0].id
		}
	},
	{ immediate: true }
)

function selectService(detail: ServiceDetail) {
	selectedServiceId.value = detail.id
}
function confirm() {
	const activeCategory = props.serviceList.find(
		(item) => item.id === activeId.value
	)
	if (activeCategory && selectedServiceId.value) {
		const service = activeCategory.serviceLists.find(
			(s) => s.id === selectedServiceId.value
		)
		if (service) {
			emit('update:modelValue', service.name)
		}
	}
	emit('update:show', false)
}
</script>

<style scoped>
.popup-title {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	padding: 18px 0 10px 0;
	background: #f5f6f9;
}
.service-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 7px;
}
.service-item {
	min-width: 90px;
	padding: 10px 18px;
	background: #ededed;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	color: #3a3a3a;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.2s;
}
.service-item.selected {
	background: #d0e1ff;
	border-color: #0065d1;
	color: #0065d1;
}
.popup-footer {
	padding: 18px 16px 16px 16px;
}
</style>

export default { // ... existing code ... }
